<template>
  <view class="list">
    <view class="item" v-for="(item,i) in list" :key="i">
      <view>
        <!--<view class="tag fail" v-if="item.status == 0">未通过</view>-->
        <!--<view class="tag" v-if="item.status == 1">审核中</view>-->
        <!--<view class="tag success" v-if="item.status == 2">已通过</view>-->
        <view class="time">{{ item.date }}</view>
      </view>
      <view class="cause" v-if="item.status == 0">审核中</view>
      <view class="cause success" v-if="item.status == 1">已通过</view>
      <view class="cause fail" v-if="item.status == 2">已拒绝</view>
    </view>
    <list-loading v-if="loading"/>
    <list-empty v-if="!loading && (!list || list.length == 0)"/>
    <list-load-over v-else-if=" loadOver"/>

  </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoadOver from "@/components/list/loadOver";
import ListEmpty from "@/components/list/empty";
import ListLoading from "@/components/list/loading";

export default {
  components: {ListLoadOver, ListEmpty, ListLoading},
  data() {
    return {
      list: [],
      loading: false,
      loadOver: false,
      page: 0,
    }
  },
  methods: {
    refresh() {
      this.clear();
      this.getList();
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      if (this.loadOver) return;
      this.loading = true;
      Api.getLeaveRecords(++this.page).then(res => {
        this.list.push(...res)
        if (res.length < 10) this.loadOver = true;
      }).finally(() => this.loading = false)
    },
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.type = options.type;
    this.refresh()
  },
  onPullDownRefresh() {
    this.refresh()
  },
  onReachBottom() {
    this.getList();
  },
}
</script>

<style scoped lang='scss'>
.list {
  padding-bottom: env(safe-area-inset-bottom);
  padding-top: r(24px);


  .item{
    background-color: white;
    margin: r(24px);
    border-radius: r(20px);
    padding: r(40px 30px 70px 30px);

    .time{
      text-align: right;
      color: #aaa;
    }

    .cause{
      margin-top: r(30px);
      text-align: center;
      font-size: r(34px);
      font-weight: bold;

      &.fail{
        color: #f85a5a;
      }

      &.success{
        color: #6fe06f;
      }

    }
  }
}
</style>